<template>
	<view class="content" :style="{'--color':color}">

		<status-bar title='选择使用方式' :back="back"></status-bar>
		<block v-for="(item,index) in pageData" :key="item.id">
			<view class="viewbox auto m-top20 p-bot20 bgwhite bor_radius_10 p-left20">
				<view class="row bot p-top20 p-bot20 j-sb a-center">
					<view class="color_33 h6 bold">订单时间：{{item.order_date}}</view>
				</view>

				<view class="rows d-flex m-top10 f-nowrap">
					<view class="product_Img p-re f-shrink-0 f-gorw0">
						<image :src="$imgUrls(item.pdtimg)" mode="aspectFill" class="wh bor_radius_10"></image>
						<view class="h7 white numId p-top4 p-bot4 p-left14 p-right14">{{item.id}}</view>
					</view>
					<view class="d-flex f-column j-sb m-left20 f-gorw1">
						<text class="color_33 size30 ellipsis">{{item.pdtname}}</text>
						<view class="d-flex a-center" v-if="item.pdt_spec">
							<text class="color_99 h6 f-shrink-0">规格：</text>
							<text class="color_33 h6 bold ellipsis">{{item.pdt_spec}}</text>
						</view>
						<view class="d-flex a-center">
							<text class="color_99 h6">数量：</text>
							<text class="color_33 h6 bold">X{{item.pdt_num}}</text>
						</view>
					</view>
				</view>
			</view>
		</block>



		<view class="viewbox auto m-top20 bgwhite p-left20 bor_radius_10">

			<view class="selectLi bot" @click="toUrl('homeDelivery?ids='+id)">
				<view class="d-flex a-center">
					<view class="iconfont icon-a-2501 size48 color_ff"></view>
					<text class="color_20 size30 m-left20">快递到家</text>
				</view>
				<view class="iconfont icon-xiangyouxiayiye color_99 h7"></view>
			</view>
			<!-- 	@click="verify = true" -->
			<view class="selectLi bot" @click="verifyBtn()">
				<view class="d-flex a-center">
					<view class="iconfont icon-a-2502 size48 color_5b"></view>
					<text class="color_20 size30 m-left20">门店自提</text>
				</view>
				<view class="iconfont icon-xiangyouxiayiye color_99 h7"></view>
			</view>

			<!-- #ifdef H5 -->
			<view class="selectLi bot" @click="ShareIn()">
				<view class="d-flex a-center">
					<view class="iconfont icon-a-2503 size48 color_ff8"></view>
					<text class="color_20 size30 m-left20">赠送好友</text>
				</view>
				<view class="iconfont icon-xiangyouxiayiye color_99 h7"></view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="selectLi bot">
				<button open-type="share" class="Share"></button>
				<view class="d-flex a-center">
					<view class="iconfont icon-a-2503 size48 color_ff8"></view>
					<text class="color_20 size30 m-left20">赠送好友</text>
				</view>
				<view class="iconfont icon-xiangyouxiayiye color_99 h7"></view>
			</view>
			<!-- #endif -->

			<view class="selectLi bot" @click="trajectory">
				<view class="d-flex a-center">
					<view class="iconfont icon-a-2503 size48 color_ac5"></view>
					<text class="color_20 size30 m-left20">商品轨迹</text>
				</view>
				<view class="iconfont icon-xiangyouxiayiye color_99 h7"></view>
			</view>
		</view>




		<!--  线下使用 -->
		<view class="masking d-flex j-centert a-center" v-if="verify" @click="verify = false">
			<view class="rows codeImg bgwhite bor_radius_20 p-bot40">
				<view class="row j-centert p-top60 p-bot60 bot_bor">
					<image :src="$imgUrls(pageCode.QRCodeImg)" mode="aspectFill" class="codeverify"></image>
				</view>
				<block v-for="(item,index) in pageCode.orderCode" :key="index">
					<view class="row j-centert color_33 h5 bold p-top30  t-letter2">{{item.idcode}}</view>
				</block>
			</view>
		</view>
	</view>
</template>


<script>
	import {
		mapState
	} from 'vuex';
	// #ifdef H5
	import jweixin from 'jweixin-module'
	// #endif
	export default {
		data() {
			return {
				imgUrl: this.imgUrl,

				shareBox: '',
				verify: false, // 线下使用
				id: '', // 商品id
				ids: [],
				keycode: [],

				pageData: [],
				pageCode: {},
				dtime: '',
				jssdk: '',
			}
		},
		onLoad(e) {
			let that = this;
			if (e.id) that.id = e.id
			if (e.ids) that.id = e.ids.toString();
			// #ifdef H5
			this.$common.H5HideShare();
			// #endif



		},
		onShow() {
			let that = this;
			that.ids = []; // 清空 避免串
			that.keycode = []; // 清空 避免串
			// that.getshareInfo();
			that.getGiveGoodsInfo();

		},
		methods: {

			// 获取jssdk信息
			getshareInfo() {
				let that = this;
				that.$http.get({
					url: '/zzj_singleSaleApi/getJssdkConfig',

				}).then(res => {
					that.jssdk = res;

				})
			},
			//  获取分享的信息
			ShareIn() {
				let that = this;
				// #ifdef H5
				this.$common.H5ShowShare();
				jweixin.config(that.jssdk);
				// #endif
				that.$http.post({
					url: '/singleSaleWarehouseApi/getShareInfo',
					data: {
						checkid: that.ids.join(','),
						keycode: that.keycode.join(',')
					}
				}).then(res => {
					if (res.errcode == '100') {
						if (res.data) {
							that.shareBox = res.data;
							let share = res.data;
							//  #ifdef H5

							jweixin.ready(function() {
								let shareData = {
									title: share.title, // 分享标题
									desc: share.desc, // 分享描述
									link: share.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
									imgUrl: share.imgUrl, // 分享图标
									success: function() {
										that.Sharing();
									},
									fail: function() {
										uni.showToast({
											title: '失败',
											icon: 'none'
										})
									}
								}
								//分享到朋友圈
								jweixin.updateAppMessageShareData(shareData);
								//分享给好友
								jweixin.updateTimelineShareData(shareData);
								//分享到朋友圈
								jweixin.onMenuShareTimeline(shareData);
								//分享给好友
								jweixin.onMenuShareAppMessage(shareData);
								//分享到QQ
								jweixin.onMenuShareQQ(shareData);
							})
							// #endif
						}
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},


			//  分享入记录表
			Sharing() {
				let that = this;
				that.$http.post({
					url: '/singleSaleWarehouseApi/Sharing',
					data: {
						ids: that.ids.toString(),

					}
				}).then(res => {
					if (res.errcode != '100') return that.$Toast(res.msg);

				})
			},
			// 获取商品信息
			getGiveGoodsInfo() {
				let that = this;
				uni.showLoading({
					title: '加载中~'
				})
				that.$http.post({
					url: '/singleSaleWarehouseApi/getGiveGoodsInfo',
					data: {
						ids: that.id,
					}
				}).then(res => {
					uni.hideLoading();
					if (res.errcode == '100') {
						const result = res.data;

						result.forEach((item, index) => {
							that.keycode.push(item.keycode)
							that.ids.push(item.id)
						})
						that.pageData = result;
						// #ifdef H5
						that.getshareInfo();

						// #endif
						that.ShareIn();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},


			// 获取二维码
			verifyBtn() {
				let that = this;
				uni.showLoading({
					title: '加载中~'
				})
				that.$http.post({
					url: '/singleSaleWarehouseApi/getGoodsQRCode',
					data: {
						checkid: that.ids.toString(),
						keycode: that.keycode.toString()
					}
				}).then(res => {
					uni.hideLoading();
					if (res.errcode == '100') {
						that.verify = true;
						that.pageCode = res.data;
						that.checkqrcode();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},

			// 查询是否被核销
			checkqrcode() {
				let that = this;
				clearInterval(that.dtime);
				let Endids = that.ids[that.ids.length - 1]; // 最后一个
				let Endkeycode = that.keycode[that.keycode.length - 1]; // 最后一个
				that.$http.post({
					url: '/singleSaleWarehouseApi/checkqrcode',
					data: {
						checkid: Endids,
						keycode: Endkeycode
					}
				}).then(res => {
					if (res.errcode != '100') return that.$Toast(res.msg);
					if (that.verify) {
						if (res.flag == 1) {
							that.dtime = setInterval(() => {
								that.checkqrcode();
							}, 3000)
						} else if (res.flag == 3) {
							clearInterval(that.dtime);
							that.verify = false;
							that.toUrl(`homeDelivery?ids=${res.data.checkids.join(',')}&delivery_type=1`)
						} else {
							clearInterval(that.dtime);
							that.$Toast('核销成功', 2)
						}
					} else {
						clearInterval(that.dtime);
					}
				})
			},

			// 商品轨迹
			trajectory() {
				let ids = this.ids.join(',');
				let keycode = this.keycode.join(',');
				this.toUrl(`process?ids=${ids}&keycode=${keycode}`)
			}
		},
		computed: {
			...mapState(['color', 'vid', 'bid']),
		},
		onShareAppMessage(res) {
			let that = this;
			let giveId = that.ids.join(',');
			let userkey = that.pageData[0].userkey;
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: that.shareBox.title,
				desc: that.shareBox.desc,
				imageUrl: that.shareBox.imgUrl,
				path: `/pages/index/index?share_v_id=${that.vid}&giveId=${giveId}&userkey=${userkey}&pageType=30`
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f9fa;
	}

	.color_ff {
		color: #ff816d;
	}

	.color_5b {
		color: #5ba7fe;
	}

	.color_ff8 {
		color: #ff834b;
	}

	.color_ac5 {
		color: #ac58e3;
	}

	.selectLi {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 20rpx 20rpx 0;
		position: relative;
	}

	.Share {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: transparent;
		border: none;
	}

	.Share::after {
		border: none;
	}

	.product_Img {
		width: 140rpx;
		height: 140rpx;
	}

	.numId {
		position: absolute;
		right: 0;
		top: 0;
		background: var(--color);
		border-radius: 0 10rpx 0 10rpx;
	}

	.share {
		height: 100rpx;
		border-radius: 50rpx;
		-webkit-border-radius: 50rpx;
		margin-top: 130rpx;
	}

	.share::before {
		content: "";
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 0 25rpx 30rpx 25rpx;
		border-color: transparent transparent #FFFFFF transparent;
		position: absolute;
		right: 36rpx;
		top: -28rpx;
	}

	.getshare {
		height: 50rpx;
		border-radius: 25rpx;
		-webkit-border-radius: 25rpx;
	}

	.codeImg {
		width: 619rpx;
	}

	.codeverify {
		width: 380rpx;
		height: 380rpx;
	}
</style>